<template>
    <div :class="['flex items-center justify-center p-2', containerClass]" style="perspective: 1000px">
        <div ref="containerRef" :class="[
            'relative flex items-center justify-center transition-all duration-200 ease-linear',
            $props.class,
        ]" style="transform-style: preserve-3d" @mouseenter="handleMouseEnter" @mousemove="handleMouseMove"
            @mouseleave="handleMouseLeave">
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMouseState } from "./useMouseState";
import { provide, ref } from "vue";

defineProps({
    class: String,
    containerClass: String,
});

const containerRef = ref<HTMLElement | null>(null);

const mouseState = useMouseState(); // Use the composable
provide("use3DCardMouseState", mouseState);

function handleMouseMove(e: MouseEvent) {
    if (!containerRef.value) return;
    const { left, top, width, height } = containerRef.value.getBoundingClientRect();
    const x = (e.clientX - left - width / 2) / 25;
    const y = (e.clientY - top - height / 2) / 25;
    containerRef.value.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`;
}

function handleMouseEnter() {
    mouseState.setMouseEntered(true);
}

function handleMouseLeave() {
    if (!containerRef.value) return;

    mouseState.setMouseEntered(false);
    containerRef.value.style.transform = `rotateY(0deg) rotateX(0deg)`;
}
</script>